<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        #addMap {
            height: 450px;
            width: 100%;
        }

        .tangram-suggestion-main {
            z-index: 5000;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box" id="location">
        <div class="filter-container">
            <el-input placeholder="公司地址" v-model="pagination.queryString" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"></el-input>
            <el-button @click="select()" class="dalfBut">查询</el-button>
            <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
        </div>
        <el-table size="small" style="height: 100%" current-row-key="id" :data="dataList" stripe
                  highlight-current-row>
            <el-table-column type="index" align="center" label="序号"></el-table-column>
            <el-table-column prop="location" label="公司地址" align="center"></el-table-column>
            <el-table-column prop="longitude" label="所在经度" align="center"></el-table-column>
            <el-table-column prop="latitude" label="所在维度" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <!-- 新增标签弹层 -->
        <div class="add-form">
            <el-dialog title="新增地址" :visible.sync="dialogFormVisible">
                <el-form class="demo-form-inline" label-position="right">
                    <el-row>
                        <!--输入框-->
                        <el-col :span="16">
                            <el-form-item>
                                <el-input :id="suggestId" type="text" v-model="formData.location"></el-input>
                            </el-form-item>
                        </el-col>
                        <!--添加-->
                        <el-col :span="1">
                            <el-button @click="handleAdd()" style="margin-left: 10px;" type="primary" round>添加
                            </el-button>
                        </el-col>
                        <!--取消-->
                        <el-col :span="1">
                            <el-button @click="clearAddMap()" style="margin-left: 60px;" round>取消</el-button>
                        </el-col>
                    </el-row>
                    <!--地图-->
                    <el-row>
                        <el-col :span="24" :id="mapInfo.mapId"></el-col>
                    </el-row>
                </el-form>

            </el-dialog>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=4BgP01hEXxgq0mqePscL8TrEYQc5DYwi"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            mapInfo: {// 初始化地图信息
                mapId: "addMap",//地图容器id
                mapLevel: 12,//地图级别
                centerPoint: {//中心点位置
                    longitude: 118.778074,
                    latitude: 32.057236
                },
            },
            suggestId: "suggestId",// 输入框id
            formData: {
                addPoint: {
                    longitude: 0,
                    latitude: 0
                },
            },//表单数据 地址数据
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 10,
                total: 100,
                queryString: null,
            },
            dataList: [],//列表数据
            dialogFormVisible: false,//控制添加窗口显示/隐藏
        },
        mounted() {
            this.findPage();
        },
        methods: {
            G(id) {
                return document.getElementById(id);
            },
            clearAddMap() {
                this.dialogFormVisible = false;
                this.formData = {};
            },

            // 弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true;
                //延迟加载
                this.$nextTick(() => {
                    this.initMap();
                });
            },
            // 初始化地图
            initMap() {
                // 因为使用到百度地图的API this指向发生了改变
                var _this = this;

                // 初始化地图容器,必须在css样式中设置地图容器的高度和宽度,否则地图无法显示
                var map = new BMap.Map(this.mapInfo.mapId);
                // 设置地图的中心点
                var point = new BMap.Point(this.mapInfo.centerPoint.longitude, this.mapInfo.centerPoint.latitude);
                // 设置 中心点坐标 和 地图级别(地图显示的大小)
                map.centerAndZoom(point, this.mapInfo.mapLevel);
                //开启鼠标滚轮缩放
                map.enableScrollWheelZoom(true);


                //建立一个自动完成的对象
                var ac = new BMap.Autocomplete(
                    {
                        //输入框id
                        "input": _this.suggestId,
                        //设定返回结果的所属范围
                        "location": map
                    });

                // 输入联想时获得的地址,方便重新定位地图
                var myValue;
                // 鼠标点击下拉列表后的事件
                // 通过监听事件还可以捕获事件触发后的状态。
                ac.addEventListener("onconfirm", function (e) {

                    //从事件中获取地址的封装的对象
                    var _value = e.item.value;
                    //获取详细地址
                    myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                    // 将详细地址赋值给表单,方便提交
                    _this.formData.location = myValue;
                    //清除地图上的覆盖物
                    map.clearOverlays();

                    //将输入的地址显示在地图上
                    //LocalSearch：用于位置检索、周边检索和范围检索
                    var local = new BMap.LocalSearch(map, {
                        //结果添加完成后的回调函数
                        onSearchComplete: function () {
                            // 获取搜索的结果
                            var pp = local.getResults().getPoi(0).point;
                            // 将地址的经纬度赋值给表单,方便提交
                            _this.formData.addPoint.longitude = pp.lng;
                            _this.formData.addPoint.latitude = pp.lat;
                            // 地图上定位中心位置 18 地图级别
                            map.centerAndZoom(pp, 18);
                            // 赋上标注
                            map.addOverlay(new BMap.Marker(pp));
                        }
                    });
                    //根据检索词发起检索
                    local.search(myValue);
                });

            },
            // 添加
            handleAdd() {
                /*              var lng = this.formData.addPoint.longitude;
                                var lat = this.formData.addPoint.latitude;
                                var location = this.formData.location;
                                console.log(lng);
                                console.log(lat);
                                console.log(location);
                                console.log(this.formData)*/
                var param = {
                    location: this.formData.location,
                    longitude: this.formData.addPoint.longitude,
                    latitude: this.formData.addPoint.latitude
                };
                axios.post("/location/addLocation.do", param).then((response) => {
                    var result = response.data;
                    if (result.flag) {
                        // 添加成功
                        // 将添加标签弹层隐藏
                        this.dialogFormVisible = false;
                        this.$message({
                            message: result.message,
                            type: 'success'
                        });
                        this.select();
                    } else {
                        // 添加失败
                        this.$message({
                            message: result.message,
                            type: "error"
                        });
                    }
                }).catch((error) => {
                    console.log(error)
                })
            },

            // 查询按钮事件的优化
            select() {
                // 点击查询按钮 currentPage 应为 1
                this.pagination.currentPage = 1;
                this.findPage();
            },
            // 清空查询条件
            clearQueryString() {
                var queryString = this.pagination.queryString;
                // 如果 查询框 有条件 就清空
                if (queryString != null && queryString.length > 0) {
                    // alert(queryString);
                    this.pagination.queryString = null;
                }
            },
            // 切换页码
            handleCurrentChange(currentPage) {
                this.clearQueryString();
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            // 分页查询
            findPage() {
                var queryString = this.pagination.queryString;
                if (queryString === "") {
                    this.pagination.queryString = null;
                }
                var params = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                };
                axios.post("/location/findPage.do", params).then((response) => {
                    var result = response.data;
                    this.pagination.total = result.total;
                    this.dataList = result.rows;
                }).catch((reason) => {
                    console.log(reason);
                })
            },

            // 删除
            handleDelete(locationId) {
                this.$confirm("此操作将永久删除该条记录?", "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "warning"
                }).then(() => {
                    // 确认删除
                    axios.delete("/location/deleteById/" + locationId + ".do").then((response) => {
                        if (response.data.flag) {
                            // 删除成功
                            this.select();
                            this.$message({
                                type: 'success',
                                message: response.data.message
                            });
                        } else {
                            // 删除失败
                            this.$message({
                                type: 'error',
                                message: response.data.message
                            });
                        }
                    }).catch((reason) => {
                        console.log(reason);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
        }
    })
</script>
</html>